import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, message } from 'antd';
import { toJS } from "mobx"
import { WeaReqTop, WeaRightMenu, WeaLocaleProvider, WeaTab, WeaLeftRightLayout, WeaNewScroll, WeaProgress } from 'ecCom'
import { WeaTableNew } from 'comsMobx'
import { ConditionNum } from '../list/listCondition'
import GovernLight from '../governPoint/light';
import GovernBadge from '../governPoint/badge';
import Model from '../model/index';
import ModalConfirm from '../modalConfirm/index';
import BtnType from '../../../util/btnType';
import ListLeftTree from '../governTree';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

//台账组件
@inject("proStore")
@observer
export default class Proinfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            btns: {
                "15": [
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j5kj5z@export`} type="primary" onClick={() => this.doQuickAction(4)}>{getLabel(17416,"导出")}</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9qrzxo@share`} type="primary" onClick={() => this.doQuickAction(5)}>{getLabel(119,"共享")}</Button>
                ],
                "5": [
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0kwhsn@export`} type="primary" onClick={() => this.doQuickAction(4)}>{getLabel(17416,"导出")}</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@g0xm6i@share`} type="primary" onClick={() => this.doQuickAction(5)}>{getLabel(119,"共享")}</Button>
                ],
                "6": [
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rostqc@new`} type="primary" onClick={() => this.doQuickAction(1)}>{getLabel(82,"新建")}</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8jxm1r@discard`} type="primary" onClick={() => this.doQuickAction(2)}>{getLabel(81999,"废弃")}</Button>,
                    // <Button type="primary" onClick={() => this.doQuickAction(3)}>导入</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gcbnz3@export`} type="primary" onClick={() => this.doQuickAction(4)}>{getLabel(17416,"导出")}</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5tbwdv@share`} type="primary" onClick={() => this.doQuickAction(5)}>{getLabel(119,"共享")}</Button>
                ],
                "7": [
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@uscnvx@export`} type="primary" onClick={() => this.doQuickAction(4)}>{getLabel(17416,"导出")}</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j51f68@share`} type="primary" onClick={() => this.doQuickAction(5)}>{getLabel(119,"共享")}</Button>
                ],
            }
        }
    }

    componentDidMount = () => {
        const { proStore } = this.props;
        proStore.setDataType("15");
        proStore.getIsTreeShow();
        //初始化页面
        if (!proStore.isSuperSearch) {
            proStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0 })
        }
    }
    componentWillReceiveProps(newProps){
      if(newProps.location.key !== this.props.location.key){
        const { proStore } = newProps;
        proStore.setDataType("15");
        proStore.getIsTreeShow();
        //初始化页面
        if (!proStore.isSuperSearch) {
            proStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0 })
        }
      }
    }

    render() {
        const { proStore,location:{pathname,search},route:{path} } = this.props;
        const { status, tasklabels, form, tableStoreDbInquire, title, formB, dataType, modelType, id, content ,columnsNum,baseSearchValue,isTreeShow,onCollapse} = proStore;
        const { loading } = status;
        const { topIcon = "icon-coms-government", iconBgcolor = "#f14a2d" } = tasklabels;
        const { visible } = this.state;
        let scrollHeight = document.body.clientHeight - 110;
        let rightMenu = this.getRightMenu(dataType);
        let tablescroll = document.body.clientHeight - 223.89-54;
        return (
            <div className="g-pro">
                <div className='g-pro-proMain g-account'>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@sdxajs`} datas={rightMenu} style={{ color: "#ccc" }}>
                        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@3w9zkk`}
                            leftWidth={250}
                            showLeft = {isTreeShow}
                            leftCom={<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@zib5ra`} height={scrollHeight}><ListLeftTree ecId={`${this && this.props && this.props.ecId || ''}_ListLeftTree@7p4glu`}  treeStore={proStore} /></WeaNewScroll>}
                            onCollapse={(bool) => { onCollapse(bool) }}
                            >
                            <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@9od50y`}
                                loading={loading}
                                icon={<i className={topIcon} />}
                                iconBgcolor={iconBgcolor}
                                title={getLabel(500425,"督办台账")}
                                tabDatas={[{ key: '15', title: getLabel(501379,"我负责") }, { key: '5', title: getLabel(501157,"我参与") }, { key: '6', title: getLabel(501158,"我发起") }, { key: '7', title: getLabel(388798,"督办查询") }]}
                                selectedKey={dataType}
                                showDropIcon={true}
                                dropMenuDatas={rightMenu}
                                buttons={this.state.btns[dataType] || []}
                                onChange={this.changeTab.bind(this) }
                                >

                                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@41dti2`}
                                    datas={[]}
                                    searchType={['base', 'advanced']}
                                    setShowSearchAd={(visible) =>{this.props.proStore.baseSearchValue = '';this.setState({ visible })}  }
                                    searchsAd={
                                        <ConditionNum ecId={`${this && this.props && this.props.ecId || ''}_ConditionNum@p77v30`} listStore={proStore} type="project" onEnterSearch={(visible) => this.setState({ visible }) } formB={formB} col={2}></ConditionNum>
                                    }
                                    buttonsAd={this.getSearchButtons() }
                                    showSearchAd={visible}
                                    onSearch={this.onSearch2}
                                    searchsBaseValue = {baseSearchValue}
                                    onSearchChange ={this.onSearchChange}
                                    >
                                </WeaTab>
                                <div >
                                    {
                                        // (!tableStoreDbInquire.loading && toJS(tableStoreDbInquire).columns.length>0 ) && //xk:解决无数据不显示列头问题(可以删除，因为其内部自己处理了自带loading)
                                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@8mqc31`}
                                            dragColumns='0'
                                            comsWeaTableStore={tableStoreDbInquire}
                                            hasOrder={true}
                                            //needScroll={true}
                                            getColumns={c => this.reRenderColumns(c) }
                                            onOperatesClick={this.onOperatesClick.bind(this) }
                                            scroll={columnsNum<=10?{x:0,y:tablescroll}:{ x: 120*columnsNum,y:tablescroll }}
                                        />
                                    }
                                </div>
                                <div>
                                    <Model ecId={`${this && this.props && this.props.ecId || ''}_Model@ienpms`} modelType={modelType} id={id} contentStore={proStore} pathname={pathname} search={search} routepath={path}></Model>
                                </div>
                                <div>
                                    <ModalConfirm ecId={`${this && this.props && this.props.ecId || ''}_ModalConfirm@fxqn0m`} modelType={modelType} id={id} content={content} confirmStore={proStore} pathname={pathname} search={search} routepath={'123456'}></ModalConfirm>
                                </div>
                            </WeaReqTop>
                        </WeaLeftRightLayout>
                    </WeaRightMenu>
                </div>
            </div>
        )
    }

    onSearchChange = (params) =>{
        const { proStore} = this.props;
        proStore.baseSearchValue = params;
    }

    changeTab = (key) => {
        const { proStore } = this.props;
        proStore.setDataType(key);
        proStore.baseSearchValue = '';
        proStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0 })

    }
    reRenderColumns(columns) {
      const {proStore:{getcolumnsNum}} = this.props;
      let columnsIndex = 0;
        columns.forEach(c => {
            //19.3.22 lusx #566607 概述：E9，督办，列表，标题较多，没有横向滚动条，没展示全
            if (c.display === "true") {
                columnsIndex = columnsIndex + 1;
            }
            if (c.dataIndex == 'progress') {
                c.render = function (text, record) {
                    return <span className='wea-prj-progressStyle' >
                        <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@5e3ehw@${c.dataIndex}`} percent={record.progress || 0} />
                    </span>
                }
            } else if (c.dataIndex == 'status') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@o21gig`} record={record} />
                    </span>
                }
            } else if (c.dataIndex == 'feedstatus') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@14ilxb`} record={record} showType="feedback"/>
                    </span>
                }
            } else if (c.dataIndex == 'enddate') {
                c.render = function (text, record) {
                    return <span>
                        <GovernBadge ecId={`${this && this.props && this.props.ecId || ''}_GovernBadge@xotsqk`} record={record} text={text} hideMsg={true} />
                    </span>
                }
            } else if (c.dataIndex == 'name') {
                c.render = function (text, record) {
                    let hrefText = `javaScript:hrefTaskInfo(${record.id});`
                    return <span>
                        {/*   {record.sKeyFlagspan === "1" ? <span className="g-table-cui">{getLabel('390310',"催")}</span>: null}   */}
                        <a href={hrefText} target="_self">{text}</a>
                    </span>
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        getcolumnsNum(columnsIndex+4);
        return columns;
    }
    onOperatesClick(record, index, operate, flag) {
        let _href = operate && operate.href ? operate.href : "";
        let fn = _href.replace("javascript:", "");
        fn = fn.substring(0, fn.indexOf('('));
        // alert("按钮后续整理");
        if (fn != "") {
            this.doAction(fn.replace("fn", ""), record);
        }
    }
    /**
     * 接口执行方法
     */
    doAction = (fn, record) => {
        const { proStore } = this.props;
        let id = record.id;
        if (BtnType.checkShowModel(fn)) {
            proStore.getActionSetting(id, fn);
        } else if (BtnType.checkShowConfirm(fn)) {
            proStore.showconfirm(id, fn, BtnType.getTitle(fn), BtnType.getContent(fn));
        } else {
            proStore.modelStore.subBtn(fn, id);
        }
    }
    /**
     * 顶部快捷按钮方法
     */
    doQuickAction = (btnKey) => {
        const { proStore } = this.props;
        const { selectedTreeKey } = proStore
        if (btnKey === 1) {//新建
            window.open("/spa/govern/static/index.html#/main/govern/top");
        } else if (btnKey === 3) {//导入
            window.open("/spa/govern/static/index.html#/main/govern/import");
        } else {
            let selectedIds = toJS(this.props.proStore.tableStoreDbInquire.selectedRowKeysAllPages);
            if (selectedIds.length == 0) {
                message.warning(getLabel(501159,'请选择要操作的数据'));
            } else {
                if (btnKey === 2) {//删除
                    proStore.isCanCancel(selectedIds);
                    // proStore.showConfirmBatch(selectedIds, "19", BtnType.getTitle("19"), BtnType.getContent("19"), BtnType.getListRefresh("19"));
                } else if (btnKey === 4) {//导出
                    proStore.exportAccountExcel(selectedIds,"27", getLabel('17416,391383',"导出台账"), getLabel('501171',"确认要导出台账吗？"),selectedTreeKey);
                } else if (btnKey === 5) {//共享
                    proStore.modelStore.showShare("", selectedIds);
                }
            }
        }
    }
    /* 高级搜索操作按钮组 */
    getSearchButtons() {
        const { proStore } = this.props;
        const { clearFormFields } = proStore;
        const btnStyle = { borderRadius: 3, width: 80 }
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0css4u@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this)}>{getLabel(197,"搜索")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ocbwmy@reset`} type="ghost" style={btnStyle} onClick={() => { proStore.clearFormFields() }}>{getLabel(2022,"重置")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@axni6p@cancel`} type="ghost" style={btnStyle} onClick={() => { this.cancel() }}>{getLabel(201,"取消")}</Button>)
        ]
    }
    /* 搜索面板搜索方法 */
    forwardQueryResult() {
        const { proStore } = this.props;
        const { selectedTreeKey } = proStore
        proStore.doSearch({ fromSuperPage: true, "categoryid": selectedTreeKey, "isSuperSearch": true })
        this.setState({ visible: false })
    }
    /* 高级搜索取消方法 */
    cancel() {
        this.setState({ visible: false })
    }
    /*
     * 顶部搜索，select的key值改变，执行方法
    */
    handleChange(data) {
        if (Object.keys(data)[0] == "selectKey") {
            const { proStore } = this.props;
            proStore.handleChange();
        }
    }
    getRightMenu(datetype) {
        let btns = [];
        if(datetype == '6'){
        btns.push({ key: "add", icon: <i className='icon-coms-Preservation'/>, content: getLabel(82, '新建', 'label'),onClick: () => this.doQuickAction(1) });
        btns.push({ key: "cancel", icon: <i className='icon-coms-delete'/>, content: getLabel(81999,"废弃"),onClick: () => this.doQuickAction(2)});
        // btns.push({ key: "import", icon: <i className='icon-coms-leading-in'/>, content: getLabel(18596,"导入"),onClick: () => this.doQuickAction(3)});
        }
        btns.push({ key: "export", icon: <i className='icon-coms-export'/>, content: getLabel(17416, '导出', 'label'),onClick: () => this.doQuickAction(4) });
        btns.push({ key: "share", icon: <i className='icon-coms-New-Flow'/>, content: getLabel(119,"共享"),onClick: () => this.doQuickAction(5)});
        return btns;
    }
    onSearch = (value) => {
        const { proStore } = this.props;
        proStore.onSearch(value);
    }

    onSearch2 = (value) => {
        const { proStore } = this.props;
        proStore.onSearch2(value);
    }
}
